<!--
  湖北11选5投注页
-->
<template>
  <div class="fixed-header">
    <x-header>交易记录</x-header>

    <list v-model="loading" :immediate-check="false" :finished="finished" @load="onLoad">
      <cell :clickable="true" :key="t.id" v-for="t in trans">
        <div class="flex-middle">
          <div>
            <div>{{t.typeDesc}}</div>
            <small class="text-grey">{{t.createTime}}</small>
          </div>
          <div class="ml-auto" :class="t.amout > 0 ? 'text-orange' : ''">{{t.amout | sign}}</div>
        </div>
      </cell>
      <div v-if="finished" class="text-center text-grey py-3">没有更多了...</div>
    </list>
  </div>
</template>

<script>
import { List, Cell } from 'vant'
import http from '../../http'

var size = 15, page = 1

export default {
  components: {List, Cell},
  name: 'transactions',
  data: () => ({
    finished: false,
    loading: false,
    trans: []
  }),
  beforeRouteEnter (to, from, next) {
    page = 1
    http.post('/user/transactions', {page, size}).then(trans => {
      next(vm => {
        vm.trans = trans
      })
    })
  },
  methods: {
    onLoad () {
      this.loading = true
      http.post('/user/transactions', {page: ++page, size}).then(trans => {
        this.loading = false
        this.trans = this.trans.concat(trans)
        if (trans.length < size) {
          this.finished = true
        }
      })
    }
  }
}
</script>
